<template>
	<view :class="[item.istop ? 'bg-light' : 'bg-white','container']" hover-class="bg-light">
		<!-- <u-swipe-action>
			<u-swipe-action-item :options="options"> -->

				<view class="chatBox" @click="onClick">
					<view class="chatLeft">
						<u-avatar class='img' shape='square' size="100rpx" :src="deaulfAvtar"></u-avatar>
					</view>
					<view class="chatRight">
						<view class="first">
							<text class="mr lh">
								{{item.logInType==1 ?item.name: item.patientName}}
							</text>
							<text class="lh">
								{{item.phone}}
							</text>
							<text class="lh" v-if="getRoleInfoList(item.roleInfoList)">
								（{{ getRoleInfoList(item.roleInfoList) }}）
							</text>
						</view>
						<view class="text-ellipsis">
							<text class="mr lh" v-if='item.institutionName'>
								{{item.institutionName}}
							</text>
							<text class="lh" v-if="item.messageCreateTime">
								{{item.messageCreateTime}}
							</text>

						</view>
						<view class="text-ellipsis lh">
							订单ID({{item.orderId}})
						</view>
						<view class="text-ellipsis lh">
							{{item.content}}
						</view>
					</view>
					<view class="unReadNumber" v-if="item.unReadNumber">
						{{item.unReadNumber}}
					</view>
				</view>

			<!-- </u-swipe-action-item>
		</u-swipe-action> -->

	</view>
</template>

<script>
	import freeBase from "@/common/mixin/free-base.js"
	export default {
		mixins: [freeBase],
		data() {
			return {
				deaulfAvtar: '/static/images/index/deaulfAvtar.png',
				patientHospital: {},
				patientList: [],
				options: [{
					text: '删除',
					style: {
						backgroundColor: '#f56c6c'
					}
				}]
			}
		},
		props: {
			item: Object,
			index: Number
		},

		mounted() {

		},
		methods: {
			getRoleInfoList(list) {
				if (list && list.length > 0) {
					let str = []
					list.forEach((t, index) => {

						if (t.name == '普通用户') {
							t.name = '病人'
						}

						str.push(t.name)

					})
					return str.join('、')
				} else {
					return false
				}
			},
			onClick() {
				this.$emit('handleItem', this.item)
			},
			long(e) {
				let x = 0
				let y = 0
				// #ifdef APP-PLUS-NVUE
				if (Array.isArray(e.changedTouches) && e.changedTouches.length > 0) {
					x = e.changedTouches[0].screenX
					y = e.changedTouches[0].screenY
				}
				// #endif
				// #ifdef H5
				x = e.changedTouches[0].pageX
				y = e.changedTouches[0].pageY
				// #endif
				// #ifdef MP
				x = e.detail.x
				y = e.detail.y
				// #endif
				this.$emit('long', {
					x,
					y,
					index: this.index
				})
			},
			// 获取所有顾客列表


		}
	}
</script>

<style scoped lang="scss">
	.container {
		padding: 20rpx 10rpx;
		box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.3);
		border-radius: 10px;
		margin-bottom: 30rpx;
		color: #A9A5A0;
		.chatBox {
			display: flex;
			align-items: center;
			position: relative;
			

			.chatLeft {}

			.chatRight {
				width: 80%;
				// font-size: 16rpx;

				.first {
					font-weight: bold;
					color: #333;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
					lines: 1;

				}

				.mr {
					margin-right: 20rpx;
					line-height: 40rpx;
				}

				.text-ellipsis {
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
					lines: 1;
				}
			}

			.lh {
				font-size: 28rpx;
				line-height: 40rpx;
			}

			.unReadNumber {
				position: absolute;
				right: 10rpx;
				top: 50%;
				transform: translateY(-50%);
				padding: 4rpx 14rpx;
				border-radius: 100rpx;
				background-color: #dc3545;
				color: #ffffff;
				font-size: 28rpx;
				line-height: 40rpx;
			}


		}

	}
</style>